import { createBEM } from '@pxxtech/utils';

const Basic = () => {
  const b = createBEM('button');
  return (
    <div>
      <div>
        <div>const [, b] = createBEM('button');</div>
      </div>
      <div>
        <div> b()</div>
        <div> {b()} </div>
      </div>
      <div>
        <div> b('text')</div>
        <div> {b('text')}</div>
      </div>
      <div>
        <div children={`b('text', { disabled: true })`} />
        {b('text', { disabled: true })}
      </div>
      <div>
        <div children={`b(['disabled', 'primary'])`} />
        {b(['disabled', 'primary'])}
      </div>
      <div>
        <div children={`b({ disabled: true, primary: true })`} />
        {b({ disabled: true, primary: true })}
      </div>
    </div>
  );
};

export default Basic;
